<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>流程列表</title>
    <link rel="stylesheet" href="../../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../../lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../../lib/layer/theme/default/layer.css">
    <script src="../../../lib/vue/vue.js"></script>
    <script src="../../../static/js/jquery.min.js"></script>
    <script src="../../../lib/vue/vue.js"></script>
    <script src="../../../lib/xe-utils/xe-utils.js"></script>
    <script src="../../../lib/element-ui/index.js"></script>
    <script src="../../../lib/vxe-table/index.js"></script>
    <script src="../../../lib/vxe-table-plugin-element/index.js"></script>
    <script src="../../../lib/xe-ajax/xe-ajax.min.js"></script>
    <script src="../../../lib/layer/layer.min.js"></script>
    <script src="../../../static/js/webApi.js"></script>
    <style type="text/css">
        html,body,#app,.el-container{
            padding: 0px;
            margin: 0px;
            height: 100%;
        }
        .el-main{
            padding: 4px;
        }
    </style>
</head>
<body>
<el-container id="app">
    <el-main>
        <el-form :inline="true" :model="queryData" ref="queryData" label-position="right" size="mini" style="height: 36px;border: 1px solid #e8eaec;">
            <el-form-item label="机构">
                <el-select v-model="tenantId" placeholder="请选择机构">
                    <el-option v-for="item in orgs" :key="item.id" :value="item.id" :label="item.name">
                        {{item.name}}
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="流程名称">
                <el-input type="text" v-model="qryName" placeholder="流程名称查询" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="queryEvent()">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh-right" @click="addEvent()">新增流程</el-button>
            </el-form-item>
        </el-form>
        <vxe-grid
                border
                stripe
                ref="xGrid"
                resizable
                show-overflow
                highlight-current-row="true"
                keep-source
                :height="tableHeight"
                size="mini"
                :pager-config="tablePage"
                :proxy-config="tableProxy"
                @cell-click="showDeploy"
               >
            <vxe-table-column type="seq" title="序号" width="60" headerAlign="center" align="center"></vxe-table-column>
            <vxe-table-column field="name" title="流程名称" width="250" headerAlign="center" align="left"></vxe-table-column>
            <vxe-table-column field="modelKey" title="流程KEY" width="100" headerAlign="center" align="center"></vxe-table-column>
            <vxe-table-column field="description" title="流程描述" width="250" headerAlign="center" align="left"></vxe-table-column>
            <vxe-table-column title="操作" width="400" headerAlign="center" align="center" show-overflow>
                <template v-slot="{ row }">
                    <vxe-button type="text" icon="fa fa-edit vxe-primary-color" @click="editEvent(row.id)" title="编辑">编辑流程</vxe-button>
                    <vxe-button type="text" icon="fa fa-trash-o vxe-danger-color" @click="removeEvent(row.id)" title="删除">删除流程</vxe-button>
                    <vxe-button type="text" icon="fa fa-file-excel-o vxe-primary-color" @click="exportEvent(row.id)" title="导出">导出</vxe-button>
                    <vxe-button type="text" icon="fa fa-file-code-o vxe-primary-color" @click="importEvent(row.id)" title="导入">导入</vxe-button>
                    <vxe-button type="text" icon="fa fa-toggle-right vxe-primary-color" @click="deployEvent(row.id,row.modelKey)" title="发布">发布</vxe-button>
                </template>
            </vxe-table-column>
        </vxe-grid>

        <vxe-grid
                border
                stripe
                resizable
                show-overflow
                highlight-current-row="true"
                keep-source
                size="mini"
                :data="deployData"
                :edit-config="{trigger:'click', mode:'row'}"
        >
            <vxe-table-column type="seq" title="序号" width="60" headerAlign="center" align="center"></vxe-table-column>
            <vxe-table-column field="name" title="部署名称" width="180" headerAlign="center" align="center"></vxe-table-column>
            <vxe-table-column field="version" title="部署版本" width="80" headerAlign="center" align="center"></vxe-table-column>
            <vxe-table-column field="deployTime" title="部署时间" width="180" headerAlign="center" align="center"></vxe-table-column>
            <vxe-table-column field="id" title="部署编号" width="320" headerAlign="center" align="center"></vxe-table-column>
        </vxe-grid>

        <vxe-modal ref="xModal" v-model="showEdit" title="新增流程" width="420" :loading="submitLoading" resize destroy-on-close>
            <el-form :model="formData" :rules="formRules" ref="formData" label-width="80px" label-position="right" size="small">
                <el-row>
                    <el-col span="24">
                        <el-form-item label="流程名称" prop="name">
                            <el-input type="text" v-model="formData.name" placeholder="请输入流程名称！"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="24">
                        <el-form-item label="流程KEY" prop="key">
                            <el-input type="text" v-model="formData.key" placeholder="请输入流程KEY，不允许重复！" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="24">
                        <el-form-item label="租户编码" prop="tenantId">
                            <el-select v-model="formData.tenantId" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in orgs" :key="item.id" :value="item.id" :label="item.name">
                                    {{item.name}}
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="24">
                        <el-form-item label="流程描述" prop="description">
                            <el-input type="textarea" v-model="formData.description" :rows="2" placeholder="请输入流程描述！" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="24">
                        <el-form-item style="text-align: right;">
                            <el-button type="primary" icon="fa fa-save" @click="submitEvent()" :disabled="disabled"> 保存</el-button>
                            <el-button type="warning" icon="el-icon-refresh-right" @click="resetEvent()">重置</el-button>
                            <el-button type="warning" icon="el-icon-switch-button" @click="closeEvent()">退出</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </vxe-modal>
    </el-main>
</el-container>
<script>
    window.onload = function () {
        var main = {
            data() {
                return {
                    loading: false,
                    disabled: false,
                    visible: false,
                    tableHeight: '380',
                    orgs:[],
                    deployData:[],
                    tenantId: '',
                    qryName: '',
                    showEdit: false,
                    tablePage: {
                        perfect: true,
                        total: 0,
                        currentPage: 1,
                        pageSize: 15,
                        align: 'left',
                        pageSizes: [15, 30, 45, 60, 75, 90],
                        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
                    },
                    tableProxy:{
                        props:{
                            result:'data.rows',
                            total:'data.total'
                        },
                        ajax:{
                            // 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax） page 对象： { pageSize, currentPage }
                            query:({ page, sort, filters }) => {
                                // 处理排序条件
                                let queryParams = Object.assign({
                                    sort:sort.property,
                                    order:sort.order
                                }, this.queryData);
                                // 处理筛选条件
                                filters.forEach(({ column, property, values }) => {
                                    queryParams[property] = values.join(',')
                                });
                                //console.info(queryParams);
                                return XEAjax.get(`${curlFinance}/models/list?currentPage=${page.currentPage}&pageSize=${page.pageSize}`, queryParams);
                            }
                        }
                    },
                    submitLoading:false,
                    queryData: {
                        tenantId : '',
                        name : ''
                    },
                    formData:{
                        name :'',
                        key : '',
                        description : '',
                        tenantId : '',
                        modelType: 0
                    },
                    formRules:{
                        name:[
                            { required:true, message:'请输入流程名称' }
                        ],
                        key:[
                            { required:true, message:'请输入流程KEY' }
                        ]
                    }
                }
            },
            created() {

            },
            mounted() {
                XEAjax.get(`${curlFinance}/models/orgs`).then(res=>{
                    if (res.code === 200){
                        this.orgs = res.data;
                    }
                })
            },
            methods:{
                queryEvent(){
                    this.queryData = {
                        tenantId : this.tenantId,
                        name : this.qryName
                    }
                    this.$refs.xGrid.commitProxy('reload');
                },
                addEvent(){
                    this.showEdit = true;
                },
                submitEvent(){
                    this.$refs['formData'].validate((valid) => {
                        if(valid) {
                            this.submitLoading = true;
                            let params = Object.assign(this.formData);
                            XEAjax.post(`${curlFinance}/models/createModel`, params).then(data => {
                                if (data.code == 200) {
                                    this.$refs.xGrid.commitProxy('reload');
                                    this.showEdit = false;
                                    window.open('/views/flow/index.html#/editor/'+data.data.id,'_blank');
                                } else {
                                    this.$XModal.alert({message: data.msg, status: 'error'});
                                }
                            });
                            this.submitLoading = false;
                        }
                    })
                },
                resetEvent(){
                    this.$refs['formData'].resetFields();
                },
                closeEvent(){
                    this.showEdit = false;
                },
                editEvent(id){
                    window.open('/views/flow/index.html#/editor/'+id,'blank_');
                },
                removeEvent(id){
                    this.$XModal.confirm('您确定要删除该数据?').then(type => {
                        if (type === 'confirm'){
                            XEAjax.get(`${curlFinance}/models/deleteModel/${id}`).then(res => {
                                if (res.code == 200) {
                                    this.$refs.xGrid.commitProxy('reload');
                                    this.$XModal.message({message: res.msg, status: 'success'});
                                } else {
                                    this.$XModal.message({message: res.msg, status: 'error'});
                                }
                            });
                        }
                    })
                },
                exportEvent(id){
                    let url = `${curlFinance}/models/export/${id}`;
                    window.location.href = url;
                },
                importEvent(id){
                    let formData = new FormData();
                    formData.append('id', id);
                    let opts = {
                        multiple: false,
                        types: ['json']
                    }
                    this.$refs.xGrid.readFile(opts).then(evnt => {
                        Array.from(evnt.target.files).map(file => {
                            formData.append('file', file);
                        });
                        XEAjax.post(`${curlFinance}/models/import`,formData).then(res=>{
                            if(res.code == 200){
                                this.$XModal.alert({message: res.msg, status: 'success'});
                            }else{
                                this.$XModal.alert({message: res.msg, status: 'error'});
                            }
                        })
                    })
                },
                deployEvent(id,modelKey){
                    let load = layer.load();
                    let params = {tenantId:this.tenantId,id:id}
                    XEAjax.get(`${curlFinance}/models/deployment`,params).then(res=>{
                        layer.close(load);
                        if (res.code === 200){
                            this.$XModal.alert({message: res.msg, status: 'success'});
                            XEAjax.get(`${curlFinance}/models/deploymentList`,
                                {tenantId:this.tenantId,modelKey:modelKey}).then(res=>{
                                this.deployData = res.data;
                            })
                        } else {
                            this.$XModal.alert({message: res.msg, status: 'error'});
                        }
                    })
                },
                showDeploy({row}){
                    let load = layer.load();
                    XEAjax.get(`${curlFinance}/models/deploymentList`,{tenantId:this.tenantId,modelKey:row.modelKey}).then(res=>{
                        this.deployData = res.data;
                        layer.close(load);
                    })
                }
            }
        }
        let vue = Vue.extend(main);
        new vue().$mount('#app');
    }
</script>
</body>
</html>
